﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/ViewV5/CSS/icfont_qj/iconfont.css">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <link href="/ViewV5/JS/element/index.css" rel="stylesheet" />

    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/layer/layer.js"></script>

    <script src="/ViewV5/JS/element/element.js"></script>
    <script src="/ViewV5/JS/bijs.js?v=5"></script>

    <style>


        .progress-of {
            height: 3px;
            background: #e1e6ea;
        }

            .progress-of .list {
                width: 33.333%;
                float: left;
                height: 100%;
                position: relative;
            }

                .progress-of .list span {
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    position: absolute;
                    left: 50%;
                    margin-left: -5px;
                    top: -5px;
                    background: #e1e6ea;
                    border-radius: 50%;
                }

                .progress-of .list i {
                    position: relative;
                    top: -30px;
                    display: inline-block;
                }

                .progress-of .list.active {
                    background: #2798df;
                }

                    .progress-of .list.active span {
                        background: #2798df;
                    }

        .progress-item {
            margin-bottom: 40px;
        }

        .progress-item-select {
            margin-left: 25px;
        }

            .progress-item-select select {
                width: 200px;
                height: 25px;
                margin-top: 5px;
            }

        .progress-btn {
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 20px;
            border-top: 1px solid #E7E7E7;
            width: 100%;
            background: #F9F9F9;
        }
        .add-item {
            float:left;
            margin-left:10PX;
            margin-bottom:10PX;
        }
    </style>



</head>
<body>
    <div class="container-fluid" id="PAGEVIEW">
        <div class="padding20" style="padding-bottom:90px;">
            <div class="progress-of tc" style="margin-top:40px;margin-bottom:30px;">
                <div class="list active">
                    <span></span>
                    <i>按照模板上传数据</i>
                </div>
                <div class="list">
                    <span></span>
                    <i>预览数据</i>
                </div>
                <div class="list">
                    <span></span>
                    <i>完成</i>
                </div>
            </div>
            <div class="tab">
                <div class="mb20 progress-item">
                    <p>一、{{prodata.导入名称}}导入说明</p>
                    <p class="mb10" style="font-weight:bolder">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{prodata.导入说明}}</p>

                </div>
                <div class="mb20 progress-item">
                    <p>二、请按照数据模板的格式，准备要导入的数据</p>
                    <p class="mb10">&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:red;" target="_blank" :href="prodata.导入模板文件"> 下载数据模板 </a></p>

                </div>
                <div class="mb20 progress-item">
                    <p>三、请选择需要导入的Excel</p>
                    <p style="margin-left:25px;" class="mt10">
                        <button type="button" class="btn btn-info btn-sm" @click="UploadClick()"><i class="iconfont icon-fj ft14 mr5"></i>添加附件</button>
                        <input type="file" name="upFile" id="upFile" class="form-control" @change="LoadUser()" accept=".xls,.xlsx" style="display:none;">
                    </p>
                </div>
                <div class="tp-progress mt20 mb20">
                    <div class="tp-man mt5 c999" style="width:60%;display:none;background:transparent;">
                        导入中....
                    </div>
                    <div>
                        <span style="color:red;">{{ImportMsg}}</span>
                    </div>
                </div>
            </div>
            <div class="tab" style="display:none;">
                <ul class="clearfix" style="display: block; padding: 0;display:none">
                    <li class="add-item">
                        <label class="add-item-label">测试</label>
                        <div class="add-ic">
                            <input type="text" class="form-control pull-left" ms-duplex="InitPass" style="width:300px;" />
                        </div>

                    </li>
                    <li class="add-item">
                        <label class="add-item-label">测试</label>
                        <div class="add-ic">
                            <input type="text" class="form-control pull-left" ms-duplex="InitPass" style="width:300px;" />
                        </div>

                    </li>
                </ul>
                <el-table :data="imPortData" height="450" border stripe style="width: 100%" highlight-current-row>

                    <el-table-column type="index"
                                     width="50">
                    </el-table-column>
                    <el-table-column v-for="col in tabfiledlist" :prop="col.ColumnName" :label="col.ColumnName" :key="col.ColumnName" min-width="120" align="center" sortable>
                        <template slot-scope="scope">
                            <span>{{scope.row[col.ColumnName]}}</span>
                        </template>
                    </el-table-column>

                </el-table>

                <span style="color:green;">{{ImportMsg}}</span>
            </div>
            <div class="tab" style="display:none;">
                <span></span>
                <br />
                <span style="color:green;">{{ImportMsg}}</span>
                <span style="color:red;">{{ErrorMsg}}</span>
            </div>
        </div>
        <div class="progress-btn tr">
            <span v-if="imPortData.length>0" class="pull-left">共{{imPortData.length}}条数据</span>
            <button type="button" class="btn btn-default" id="reload" @click="reload()">重新导入</button>
            <button type="button" class="btn btn-default" id="qxbtn" @click="qx()">取消</button>
            <button type="button" class="btn btn-info" @click="SaveUser(this)" id="ksdr" style="display:none;">开始导入</button>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#PAGEVIEW',
            data: {
                pid: ComFunJS.getQueryString('pid', '0'),
                imPortData: [],
                ImportCount: 0,
                ImportMsg: "",
                ErrorMsg: "",
                tabfiledlist: [],
                prodata: {
                    导入名称: "", 导入物理表名: "", 关联更新: [], 导入说明: "", 导入数据开始行: "", 导入前处理方法: "", 导入后处理方法: "", 导入模板文件: "", 导入字段: []
                },

            },
            created() {


            },
            methods: {
                inityb: function () {
                    $.getJSON("/ViewV5/AjaxHelp.ashx?Action=FORMBI_INITIMPORTDATA", { P1:app.pid},
                        function (result) {
                        
                            _.forEach(_.keys(app.prodata), function (pro) {
                                var temp = _.find(result.Result, function (o) { return o.ExFiledName == pro; });
                                app.prodata[pro] = temp.ExtendDataValue;
                            });
                            app.prodata.导入模板文件 = JSON.parse(app.prodata.导入模板文件)[0].url;

                        }
                    )
                },
                jxfiled: function (jxdata) {
                    app.tabfiledlist = [];
                    _.forEach(_.keys(jxdata[0]), function (value) {
                        var fid = {
                            ColumnName: value,
                            ColumnType: "Str",
                            Dimension: "1",
                            Name: value,
                        }
                        if (_.findIndex(app.tabfiledlist, function (o) { return o.ColumnName == fid.ColumnName; }) == -1) {
                            app.tabfiledlist.push(fid);
                        }
                    });
                },//解析数据维度
                LoadUser: function () {
                    if (document.getElementById("upFile").files.length > 0) {
                        $(".tp-man").show();
                        app.imPortData = [];
                        app.ImportCount = 0;
                        var formData = new FormData();
                        formData.append("upFile", document.getElementById("upFile").files[0]);
                        formData.append("headrow", app.prodata.导入数据开始行);
                        $.ajax({
                            url: "/ViewV5/AjaxHelp.ashx?Action=IMPORTDATA",
                            type: "POST",
                            data: formData,
                            /**
                            *必须false才会自动加上正确的Content-Type
                            */
                            contentType: false,
                            /**
                            * 必须false才会避开jQuery对 formdata 的默认处理
                            * XMLHttpRequest会对 formdata 进行正确的处理
                            */
                            processData: false,
                            success: function (result) {
                                $(".tp-man").hide();
                                document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
                                $("#upFile").change(function () {
                                    app.LoadUser();
                                });
                                var r = $.parseJSON(result);
                                if (r.ErrorMsg == "") {
                                    app.jxfiled(r.Result);
                                    app.imPortData = r.Result;
                                    if (app.imPortData.length > 0) {
                                        app.ImportCount = app.imPortData.length;
                                        $(".list").removeClass("active");
                                        $(".list").eq(1).addClass("active");
                                        $(".tab").hide();
                                        $(".tab").eq(1).show();
                                        $("#ksdr").show();
                                    } else {
                                        ComFunJS.winwarning('没有数据哦');
                                    }
                                }
                                else {
                                    ComFunJS.winwarning(r.ErrorMsg);
                                }
                            }
                        });
                    }
                    else {
                        ComFunJS.winwarning("请上传文件");
                    }
                },
                reload: function () {
                    location.reload();
                },
                SaveUser: function () {
                    dom = $("#ksdr")[0];
                    $(dom).text("正在导入，请稍后");
                    $(dom).attr("disabled", true);
                    $("#qxbtn").attr("disabled", true);
                    $.getJSON("/ViewV5/AjaxHelp.ashx?Action=FORMBI_SAVEIMPORTDATA", { P1: JSON.stringify(app.imPortData), P2: JSON.stringify(app.prodata) },
                        function (result) {
                            $(".list").removeClass("active");
                            $(".list").eq(2).addClass("active");
                            $(".tab").hide();
                            $(".tab").eq(1).show();
                            $("#ksdr").hide();
                            app.jxfiled(result.Result);
                            app.imPortData = result.Result;
                            app.ImportMsg = "共执行了" + app.ImportCount + "条记录" + result.Result1;
                            $(dom).text("确定导入");
                            $(dom).attr("disabled", false);
                            $("#qxbtn").attr("disabled", false);
                        })
                },
                UploadClick: function () {
                    $("#upFile").trigger("click");
                },
                qx: function () {
                    top.layer.closeAll();
                },


            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    pro.inityb();
                })

            }
        })


    </script>
</body>

</html>
